<template>
  <div class="myCollect">

    <!--头部-->
    <!--<mt-header title="地址管理">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->

    <!-- 收货地址 -->
    <div v-for="a in list">
      <div class="address_1">
        <p>{{a.name}}</p>
        <p>{{a.phone}}</p>
        <p>{{a.address}}</p>
        <p>{{a.address1}}</p>
      </div>
      <div class="address_2">
        <img src="../assets/ios/ico_1@1x.png" alt="">
        <p>设为默认</p>
        <img src="../assets/ios/ico_bianji@1x.png" alt="">
        <p>编辑</p>
        <img src="../assets/ios/ico_shanchu@1x.png" alt="">
        <p v-on:click="remove">删除</p>
      </div>
    </div>

    <!-- 收货地址 -->
    <div v-for="a in list">
      <div class="address_1">
        <p>{{a.name}}</p>
        <p>{{a.phone}}</p>
        <p>{{a.address}}</p>
        <p>{{a.address1}}</p>
      </div>
      <div class="address_2">
        <img src="../assets/ios/ico_1@1x.png" alt="">
        <p>设为默认</p>
        <img src="../assets/ios/ico_bianji@1x.png" alt="">
        <p>编辑</p>
        <img src="../assets/ios/ico_shanchu@1x.png" alt="">
        <p v-on:click="remove">删除</p>
      </div>
    </div>

    <!--按钮-->
    <div class="footer">
      <p class="btn1">添加新增地址</p>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Mint from 'mint-ui';
  import 'mint-ui/lib/style.css';
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'

  Vue.use(Mint);
  export default {
    name: "myCollect",
    data() {
      return {
        list: [{name: "张三", phone: "13799992222", address: "北京市海淀区中关村南路中科软商务楼中科软科技", address1: "北京市海淀区"}],
        list: [{name: "李四", phone: "13799993333", address: "北京市海淀区中关村北路中科软商务楼中科软科技", address1: "北京市朝阳区"}]
      }
    },
    methods: {
      remove: function (index) {
        alert("是否删除")
        this.list.splice(this.list)
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
  }
</script>

<style scoped lang="scss">
  .myCollect {
    background: #f4f4f4;
    width: 640px;
    height: 100%;
  }
  .mint-header {
    background: black;
  }
  .address_1 {
    width: 640px;
    height: 208px;
    margin-top: 30px;
    background: #FFFFFF;
    border-bottom: 1px solid #f4f4f4 !important;
    p:nth-of-type(1) {
      font-size: 28px;
      color: #3b3b43;
      padding-top: 46px;
      margin-left: 34px;
      float: left;
    }
    p:nth-of-type(2) {
      font-size: 28px;
      color: #3b3b43;
      float: right;
      margin-right: 30px;
      padding-top: 46px;
    }
    p:nth-of-type(3) {
      clear: both;
      font-size: 26px;
      color: #a1a1a1;
      padding-top: 32px;
      margin-left: 30px;
    }
    p:nth-of-type(4) {
      clear: both;
      font-size: 26px;
      color: #a1a1a1;
      padding-top: 16px;
      margin-left: 30px;
    }
  }

  .address_2 {
    width: 640px;
    height: 90px;
    display: flex;
    background: #FFFFFF;
    align-items: center;
    img:nth-of-type(1) {
      width: 32px;
      height: 32px;
      margin-left: 30px;
    }
    p:nth-of-type(1) {
      font-size: 22px;
      color: #fe3519;
      line-height: 32px;
      margin-left: 8px;
    }
    img:nth-of-type(2) {
      width: 26px;      height: 26px;
      margin-left: 256px;
    }
    p:nth-of-type(2) {
      font-size: 22px;
      color: #616163;
      margin-left: 14px;
    }
    img:nth-of-type(3) {
      width: 24px;
      height: 25px;
      margin-left: 42px;
    }
    p:nth-of-type(3) {
      font-size: 22px;
      color: #616163;
      margin-left: 8px;
    }
  }

  .footer {
    width: 640px;
    height: 150px;
    text-align: center;
    .btn1 {
      width: 600px;
      height: 76px;
      border-radius: 10px;
      background: url("../assets/ios/btn_2@1x.png");
      background-size: cover;
      margin-top: 260px;
      text-align: center;
      line-height: 76px;
      font-size: 26px;
      color: #fe3519;
      margin-left: 20px;
    }
  }
</style>
